TypeScript 基础
1. 什么是 TypeScript？
TypeScript 是 JavaScript 的一个超集，它添加了可选的静态类型和基于类的面向对象编程。TypeScript 代码最终会被编译成普通的 JavaScript 代码，因此它可以在任何支持 JavaScript 的环境中运行。
1.1 为什么选择 TypeScript？
- 静态类型检查：TypeScript 可以在编译时检查类型错误，减少运行时错误。
- 更好的代码提示：IDE 可以提供更好的代码补全和错误提示。
- 面向对象编程：TypeScript 支持类、接口、泛型等面向对象的特性。
2. 安装 TypeScript
首先，你需要安装 TypeScript。你可以通过 npm 来安装：
npm install -g typescript
安装完成后，你可以使用 tsc 命令来编译 TypeScript 文件。
3. 编写第一个 TypeScript 程序
创建一个名为 hello.ts 的文件，并编写以下代码：
function greet(name: string) {
return `Hello, ${name}!`;
}
console.log(greet("TypeScript"));
3.1 编译 TypeScript 文件
在终端中运行以下命令来编译 hello.ts 文件：
tsc hello.ts
编译完成后，会生成一个 hello.js 文件，内容如下：
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("TypeScript"));
3.2 运行 JavaScript 文件
你可以使用 Node.js 来运行生成的 JavaScript 文件：
node hello.js
输出结果将是：
Hello, TypeScript!
4. 基本类型
TypeScript 支持 JavaScript 的所有基本类型，并且添加了一些额外的类型。
4.1 基本类型
- string：字符串类型
- number：数字类型
- boolean：布尔类型
- any：任意类型
- void：表示没有返回值
4.2 示例代码
let name: string = "Alice";
let age: number = 30;
let isStudent: boolean = true;
let anything: any = "可以是任何类型";
function logMessage(): void {
console.log("This function returns nothing.");
}
5. 数组和元组
5.1 数组
TypeScript 中的数组可以存储相同类型的多个值。
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];
5.2 元组
元组允许你定义一个固定长度的数组，其中每个元素可以是不同的类型。
let person: [string, number] = ["Alice", 30];
6. 接口和类型别名
6.1 接口
接口用于定义对象的结构。
interface Person {
name: string;
age: number;
}
function greetPerson(person: Person) {
console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}
let alice: Person = { name: "Alice", age: 30 };
greetPerson(alice);
6.2 类型别名
类型别名允许你为类型创建一个别名。
type Name = string;
type Age = number;
let myName: Name = "Alice";
let myAge: Age = 30;
7. 类
TypeScript 支持面向对象编程，你可以使用类来创建对象。
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
makeSound() {
console.log(`${this.name} barks.`);
}
}
let dog = new Dog("Buddy");
dog.makeSound(); // 输出: Buddy barks.
8. 泛型
泛型允许你编写可以处理多种类型的代码。
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("Hello");
let output2 = identity<number>(42);
9. 实践练习
9.1 练习：创建一个简单的 Todo 应用
- 创建一个
Todo接口，包含id、text和completed属性。 - 创建一个
TodoList类，包含todos数组和addTodo、removeTodo、completeTodo方法。 - 编写代码来测试
TodoList类。
9.2 示例代码
interface Todo {
id: number;
text: string;
completed: boolean;
}
class TodoList {
todos: Todo[] = [];
addTodo(text: string) {
const newTodo: Todo = {
id: this.todos.length + 1,
text,
completed: false,
};
this.todos.push(newTodo);
}
removeTodo(id: number) {
this.todos = this.todos.filter((todo) => todo.id !== id);
}
completeTodo(id: number) {
const todo = this.todos.find((todo) => todo.id === id);
if (todo) {
todo.completed = true;
}
}
}
const todoList = new TodoList();
todoList.addTodo("Learn TypeScript");
todoList.addTodo("Build a Todo App");
todoList.completeTodo(1);
console.log(todoList.todos);
10. 总结
通过本教程，你已经学习了 TypeScript 的基础知识，包括类型系统、接口、类、泛型等。TypeScript 可以帮助你编写更健壮、更易于维护的代码。继续探索 TypeScript 的高级特性，如装饰器、模块、命名空间等，以进一步提升你的编程技能。
11. 下一步
- 学习如何在 React 项目中使用 TypeScript。
- 探索 TypeScript 的高级特性，如装饰器、模块、命名空间等。
- 实践编写更复杂的 TypeScript 应用，如电商网站、社交媒体应用等。
希望这篇教程能帮助你快速入门 TypeScript，并在实际项目中应用它！